<template>
    <div class="py-4 container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-3 col-md-6 col-12">
              <card
                :title="stats.money.title"
                :value='`$${stats.money.value}`'
                
                :iconClass="stats.money.iconClass"
                :iconBackground="stats.money.iconBackground"
                
                directionReverse
              ></card>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
              <card
                :title="stats.users.title"
                :value="stats.users.value"
                
                :iconClass="stats.users.iconClass"
                :iconBackground="stats.users.iconBackground"
                
                directionReverse
              ></card>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
              <card
                :title="stats.clients.title"
                :value="stats.clients.value"
                
                :iconClass="stats.clients.iconClass"
                :iconBackground="stats.clients.iconBackground"
                :percentageColor="stats.clients.percentageColor"
                
                directionReverse
              ></card>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
              <card
                :title="stats.sales.title"
                :value='`$${stats.sales.value}`'
                
                :iconClass="stats.sales.iconClass"
                :iconBackground="stats.sales.iconBackground"
                
                directionReverse
              ></card>
            </div>
          </div>
          <div class="row">
            <div class="card z-index-2">
                <gradient-line-chart />
            </div>
          </div>
          <div class="row mt-4">
            
            <div class="card">
            <div class="p-3 pb-0 card-header">
                <div class="d-flex justify-content-between">
                <h6 class="mb-2">Facility Revenue Table</h6>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table align-items-center">
                  <tbody>
                    <tr v-for="(item, index) in incomeList" :key="index">
                      <td class="w-30">
                          <div class="px-2 py-1 d-flex align-items-center">
                          <div>
                            <img
                              :src="'./img/'+ item.img"
                              class="avatar avatar-xl me-3"
                              alt="user6"
                            />
                          </div>
                          <div class="ms-4">
                              <p class="mb-0 text-xs font-weight-bold">Name:</p>
                              <h6 class="mb-0 text-sm">{{item.f_name}}</h6>
                          </div>
                          </div>
                      </td>
                      <td>
                          <div class="text-center">
                          <p class="mb-0 text-xs font-weight-bold">Location:</p>
                          <h6 class="mb-0 text-sm">{{item.location}}</h6>
                          </div>
                      </td>
                      <td>
                          <div class="text-center">
                          <p class="mb-0 text-xs font-weight-bold">Orders:</p>
                          <h6 class="mb-0 text-sm">{{item.count}}</h6>
                          </div>
                      </td>
                      <td>
                          <div class="text-center">
                          <p class="mb-0 text-xs font-weight-bold">Value:</p>
                          <h6 class="mb-0 text-sm">{{"$"+item.total}}</h6>
                          </div>
                      </td>
                    </tr>
                  </tbody>
              </table>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    import Card from "@/examples/Cards/Card.vue";
    import GradientLineChart from "@/examples/Charts/GradientLineChart.vue";
    //   import Carousel from "./components/Carousel.vue";
    //   import CategoriesCard from "./components/CategoriesCard.vue";
    // import SvgIcon from '@jamescoyle/vue-icon';
    import router from "@/router/index.js"
    import axios from 'axios';
  export default {
    name: "dashboard-default",
    created(){
    const flag = sessionStorage.getItem("LOGINFLAG")
    if(flag == null){
      router.push('/signin')
    }
  },
    data() {
      return {
        incomeList:[],
        date_list:[],
        order_list:[],
        user_list:[],
        stats: {
        money: {
          title: "Today's Income",
          value: 0,
          percentage: "+55%",
          iconClass: "ni ni-money-coins",
          detail: "since yesterday",
          iconBackground: "bg-gradient-danger",
        },
        users: {
          title: "amount of user",
          value: 0,
          percentage: "+3%",
          iconClass: "ni ni-world",
          iconBackground: "bg-gradient-primary",
          detail: "since last week",
        },
        clients: {
          title: "amount of order",
          value: 0,
          percentage: "-2%",
          iconClass: "ni ni-paper-diploma",
          percentageColor: "text-danger",
          iconBackground: "bg-gradient-success",
          detail: "since last quarter",
        },
        sales: {
          title: "total income",
          value: 0,
          percentage: "+5%",
          iconClass: "ni ni-cart",
          iconBackground: "bg-gradient-warning",
          detail: "than last month",
        },
      },
      sales: {
        us: {
          country: "United States",
          sales: 2500,
          value: "$230,900",
          bounce: "29.9%",
          flag: "US",
        },
        germany: {
          country: "Germany",
          sales: "3.900",
          value: "$440,000",
          bounce: "40.22%",
          flag: "DE",
        },
        britain: {
          country: "Great Britain",
          sales: "1.400",
          value: "$190,700",
          bounce: "23.44%",
          flag: "GB",
        },
        brasil: {
          country: "Brasil",
          sales: "562",
          value: "$143,960",
          bounce: "32.14%",
          flag: "BR",
        },
      },
      };
    },
    components: {
      Card,
      GradientLineChart,
      // SvgIcon,
    //   Carousel,
    //   CategoriesCard,
    },
    mounted(){
      axios({
          method:'get',
          baseURL:'https://fitzone.work:8080/get_count',
          
        }).then(res =>{
          console.log("!!!!!!!!!!")
          console.log(res.data)
          console.log("!!!!!!!!!!")
          this.incomeList = res.data
        })
      axios
      .get('https://fitzone.work:8080/user')
      .then(res=>{
        this.user_list=res.data
        this.stats.users.value=this.user_list.length
      })
      axios
      .get('https://fitzone.work:8080/date')
      .then(res=>{
        this.date_list=res.data[0]
        axios
        .get('https://fitzone.work:8080/orderAll')
        .then(res=>{
          this.order_list=res.data
          //console.log(res.data)
          //console.log(this.order_list)
          this.stats.clients.value=res.data.length
          for(var item in res.data){
            if(res.data[item].service_time==this.date_list){
              this.stats.money.value+=Number(res.data[item].price)
            }
          }
          for(var index in res.data){
            this.stats.sales.value+=Number(res.data[index].price)
          }
        })
      })
    }
  };
  </script>
  